<template>
	<view class="my-container">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="avatar-section">
				<image class="avatar" src="/static/images/default-avatar.png"></image>
				<text class="username">游客</text>
			</view>
			<view class="dcloud-member">
				<text>DCloud会员</text>
				<view class="vip-container">
					<button class="open-vip-btn">立即开通</button>
				</view>
			</view>
		</view>

		<!-- 用户数据区域 -->
		<view class="user-data">
			<view class="data-item">
				<text class="number">128.8</text>
				<text class="label">余额</text>
			</view>
			<view class="data-item">
				<text class="number">0</text>
				<text class="label">优惠券</text>
			</view>
			<view class="data-item">
				<text class="number">20</text>
				<text class="label">积分</text>
			</view>
		</view>

		<!-- 订单区域 -->
		<view class="order-section">
			<view class="order-item" v-for="(item, index) in orderItems" :key="index" @click="navigateToOrder(item.type)">
				<image class="order-icon" :src="item.icon"></image>
				<text class="order-text">{{item.text}}</text>
			</view>
		</view>

		<!-- 其他功能列表 -->
		<view class="function-list">
			<view class="function-item" @click="navigateToWallet">
				<view class="left">
					<image class="function-icon" src="/static/images/wallet.png"></image>
					<text>我的钱包</text>
				</view>
				<text class="hint-text">您的会员还有3天过期</text>
				<image class="arrow" src="/static/images/right-arrow.png" />
			</view>
			
			<view class="function-item" @click="navigateToCoupon">
				<view class="left">
					<image class="function-icon" src="/static/images/‌coupon‌.png"></image>
					<text>我的卡劵</text>
				</view>
				<image class="arrow" src="/static/images/right-arrow.png" />
			</view>
			
			<view class="function-item" @click="navigateToAddress">
				<view class="left">
					<image class="function-icon" src="/static/images/location.png"></image>
					<text>地址管理</text>
				</view>
				<image class="arrow" src="/static/images/right-arrow.png" />
			</view>
			<!-- <view class="function-item" @click="share">
				<view class="left">
					<image class="function-icon" src="/static/images/share.png"></image>
					<text>分享</text>
				</view>
				<text class="hint-text">邀请好友赢10万大礼</text>
				<image class="arrow" src="/static/images/right-arrow.png" />
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderItems: [
				{
					icon: '/static/images/order-all.png',
					text: '全部订单',
					type: 'all'
				},
				{
					icon: '/static/images/pending-payment.png',
					text: '待付款',
					type: 'pending'
				},
				{
					icon: '/static/images/pending-delivery.png',
					text: '待收货',
					type: 'delivery'
				},
				{
					icon: '/static/images/after-sale.png',
					text: '退款/售后',
					type: 'refund'
				},
				{
					icon: '/static/images/order-history.png',
					text: '浏览记录',
					type: 'history'
				}
			]
		}
	},
	methods: {
		navigateToOrder(type) {
			uni.navigateTo({
				url: `/pagesA/my/order?type=${type}`
			})
		},
		navigateToWallet() {
			uni.navigateTo({
				url: '/pagesA/my/wallet'
			})
		},
		navigateToCoupon() {
			uni.navigateTo({
				url: '/pagesA/my/coupon'
			})
		},
		navigateToAddress() {
			uni.navigateTo({
				url: '/pagesA/my/address'
			})
		},
		share() {
			// 移除showShareMenu调用，改为使用onShareAppMessage生命周期
		}
	},
	onShareAppMessage(res) {
		return {
			title: '邀请好友赢10万大礼',
			path: '/pages/index/index',
			imageUrl: '/static/images/share-poster.png'  // 分享图片，建议尺寸5:4
		}
	},
	onShow() {
		uni.setTabBarStyle({
			backgroundColor: '#ffffff',
			borderStyle: 'white',
			color: '#8a8a8a',
			selectedColor: '#eb4446'
		})
	}
}
</script>

<style lang="scss">
.my-container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.user-info {
	background: linear-gradient(to right, #ff4444, #fad0c4);
	color: #fff;
	padding-top: 25%;

	.avatar-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 30rpx 30rpx 0 30rpx;

		.avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.username {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.dcloud-member {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: rgba(0, 0, 0, 0.1);
		padding: 20rpx;
		border-radius: 10rpx;
		
		.vip-container {
			display: flex;
			justify-content: right;
			align-items: center;
			
			.open-vip-btn {
				font-size: 24rpx;
				background: #fff;
				color: #ff9a9e;
				padding: 4rpx 20rpx;
				border-radius: 30rpx;
			}
		}

		
	}
}

.user-data {
	display: flex;
	background: #fff;
	padding: 30rpx 0;
	margin: 20rpx;
	border-radius: 10rpx;

	.data-item {
		flex: 1;
		text-align: center;
		border-right: 1px solid #eee;
		&:last-child {
			border-right: none;
		}

		.number {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
		}

		.label {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
}

.order-section {
	background: #fff;
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
	border-radius: 10rpx;

	.order-item {
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.order-icon {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
		}

		.order-text {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.function-list {
	// background: #fff;
	margin: 20rpx;

	.function-item {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
		border-radius: 10rpx;

		.left {
			display: flex;
			align-items: center;

			.function-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.hint-text {
			font-size: 24rpx;
			color: #999;
			margin-right: 20rpx;
		}

		.arrow {
			color: #999;
			width: 30rpx;
			height: 30rpx;
		}
	}
}
</style>
